<template>
  <div>
    <div class="main">
      <div class="m-ft">
        <div class="copy">
          <p>
            <a href="https://st.music.163.com/official-terms/service">服务条例</a>
            <span>|</span>
            <a href="https://st.music.163.com/official-terms/privacy">隐私政策</a>
            <span>|</span>
            <a href="https://st.music.163.com/official-terms/children">儿童隐私政策</a>
            <span>|</span>
            <a href="https://music.163.com/st/staticdeal/complaints.html">版权投诉</a>
            <span>|</span>
            <a href="http://ir.music.163.com/">投资者关系</a>
            <span>|</span>
            <a href="https://music.163.com/ui/resource">广告合作</a>
            <span>|</span>
            <a href="https://jubao.163.com/">廉正举报</a>
            <span>|</span>
            <a href="https://mp.music.163.com/600948c936c13f4d09752e73/contact-us-web/index.html?source=Music-Main-Station">联系我们</a>
          </p>
          <p>
            <span>网易公司版权所有©1997-2022</span>
            <span>杭州乐读科技有限公司运营：</span>
            <a href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8282703158/452a/ca0c/3a10/caad83bc8ffaa850a9dc1613d74824fc.png">浙网文[2021] 1186-054号</a>
          </p>
          <p>
            <a href="https://beian.miit.gov.cn/#/Integrated/index">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564">
              <span class="icon"></span>
              <span>浙公网安备 33010902002564号</span>
            </a>
          </p>
          <p>
            <span>互联网宗教信息服务许可证：浙（2022）0000120</span>
            <span>监督举报邮箱：51jubao@service.netease.com</span>
          </p>
        </div>
        <ul class="enter">
          <li>
            <a href="https://web-amped.music.163.com/"></a>
            <span></span>
          </li>
          <li>
            <a href="https://music.163.com/st/userbasic#/auth"></a>
            <span></span>
          </li>
          <li>
            <a href="https://music.163.com/musician/artist"></a>
            <span></span>
          </li>
          <li>
            <a href="https://music.163.com/web/reward"></a>
            <span></span>
          </li>
          <li>
            <a href="https://music.163.com/st/ncreator/revenue-plan"></a>
            <span></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 173px;
  background-color: #F2F2F2;

  .m-ft {
    width: 980px;
    height: 115px;
    margin: 0 auto;
    padding-top: 20px;
    .copy {
      float: left;
      width: 535px;
      height: 115px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;

      p {
        &:nth-child(1) {
          width: 535px;
          height: 24px;

          a {
            color: #999;
          }

          span {
            margin: 0 4px;
            color: #c2c2c2;
          }
        }

        &:nth-child(2) {
          width: 535px;
          height: 24px;

          span {
            &:nth-child(1) {
              margin-right: 10px;
            }

            &:nth-child(2) {
              margin-right: 2px;
            }
          }

          a {
            color: #999;
            text-decoration: underline;
          }
        }

        &:nth-child(3) {
          width: 535px;
          height: 28px;

          a {
            color: #000;

            &:nth-child(1) {
              margin-right: 10px;
            }

            &:nth-child(2) {
              .icon {
                width: 14px;
                height: 14px;
                vertical-align: -2px;
                display: inline-block;
                background-size: 14px 14px;
                background-image: url("../../assets/police.png");
              }
            }
          }
        }

        &:nth-child(4) {
          width: 535px;
          height: 24px;
        }
      }
    }
  }
}

.enter {
  float: right;
  width: 420px;
  height: 70px;

  li {
    width: 60px;
    height: 70px;
    float: left;
    text-align: center;
    color: #666;
    margin-left: 24px;

    span {
      display: inline-block;
      width: 72px;
      height: 14px;
      background-size: 180px 139px;
      background-image: url("../../assets/foot_enter_tt.png");
      background-repeat: no-repeat;

    }

    a {
      width: 50px;
      height: 45px;
      display: inline-block;
      background-size: 110px 552px;
      background-repeat: no-repeat;
      background-image: url("../../assets/foot_enter_new.png");
    }

    &:nth-child(1) {
      a{
        background-position: -63px -456.5px;
      }
      span{
        background-position:  0 -108px;
      }
    }
    &:nth-child(2) {
      a{
        background-position: -63px -101px;
      }
      span{
        background-position: -1px -91px;
      }
    }
    &:nth-child(3) {
      a{
        background-position: 0 0;
      }
      span{
        background-position:  0 0;
      }
    }
    &:nth-child(4) {
      a{
        background-position: -60px -50px;
      }
      span{
        background-position:  0 -54px;
      }
    }
    &:nth-child(5) {
     a{
       background-position: 0 -101px;
     }
      span{
        background-position:  -1px -72px;
      }
    }
  }
}
</style>